<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>DatePicker 日期选择框</title>
	<link rel="stylesheet" href="../static/css/reset.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/antd.min.js"></script>
	<script src="../static/js/icons_antd.js"></script>
</head>
<style>
.ant-space-item{
	margin-left: 20px;
}
</style>
<body>

<div id="app"><a-config-provider :locale="locale">
	<a-divider class="a-divi" orientation="left">基本用法</a-divider><!-- =============================================================== -->
	<p class="desc">最简单的用法，在浮层中可以选择或者输入日期。</p>
	<a-space direction="vertical" :size="12">
		<a-date-picker v-model:value="value1_1"></a-date-picker>
		<a-date-picker v-model:value="value1_1_1" :default-Picker-Value='dayjs("2021-09-09")'></a-date-picker>
		<a-date-picker v-model:value="value1_2" picker="week"></a-date-picker>
		<a-date-picker v-model:value="value1_3" picker="month"></a-date-picker>
		<a-date-picker v-model:value="value1_4" picker="quarter"></a-date-picker>
		<a-date-picker v-model:value="value1_5" picker="year"></a-date-picker>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">无边框</a-divider><!-- =============================================================== -->
	<p class="desc">无边框样式。</p>
	<a-space direction="vertical" :size="12">
		<a-date-picker v-model:value="value2_1" :bordered="false"></a-date-picker>
		<a-date-picker v-model:value="value2_2" picker="week" :bordered="false"></a-date-picker>
		<a-date-picker v-model:value="value2_3" picker="month" :bordered="false"></a-date-picker>
		<a-date-picker v-model:value="value2_4" picker="quarter" :bordered="false"></a-date-picker>
		<a-date-picker v-model:value="value2_5" picker="year" :bordered="false"></a-date-picker>
	
		<a-range-picker v-model:value="value2_6" :bordered="false"></a-range-picker>
		<a-range-picker v-model:value="value2_7" picker="week" :bordered="false"></a-range-picker>
		<a-range-picker v-model:value="value2_8" picker="month" :bordered="false"></a-range-picker>
		<a-range-picker v-model:value="value2_9" picker="year" :bordered="false"></a-range-picker>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">日期时间选择</a-divider><!-- =============================================================== -->
	<p class="desc">增加选择时间功能，当 showTime 为一个对象时，其属性会传递给内建的 TimePicker。</p>
	<a-space direction="vertical" :size="12">
		<a-date-picker v-model:value="value3_1" show-time placeholder="Select Time" @change="onChange" @ok="onOk"></a-date-picker>
		<a-range-picker v-model:value="value3_2" :show-time="{ format: 'HH:mm' }" format="YYYY-MM-DD HH:mm" :placeholder="['Start Time', 'End Time']"
			@change="onRangeChange5" @ok="onRangeOk"></a-range-picker>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">不可选择日期和时间</a-divider><!-- =============================================================== -->
	<p class="desc">可用 disabledDate 和 disabledTime 分别禁止选择部分日期和时间，其中 disabledTime 需要和 showTime 一起使用。</p>
	<p class="desc">disabledTime 的更详细用法见：/antd/data_in/TimePicker.html 的 disabledTime13_2() 方法</p>
	<a-space direction="vertical">
		<a-date-picker v-model:value="value4_1" :disabled-date="disabledDate4" :disabled-time="disabledDateTime4" :show-time="show_time4_1"></a-date-picker>
		<a-date-picker v-model:value="value4_2" :disabled-date="disabledDate4" picker="month"></a-date-picker>
		<a-range-picker v-model:value="value4_3" :disabled-date="disabledDate4"></a-range-picker>
		<a-range-picker v-model:value="value4_4" :disabled-date="disabledDate4" :disabled-time="disabledRangeTime4" style="width: 400px"
			:show-time="show_time4_4" format="YYYY-MM-DD HH:mm:ss"></a-date-picker>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">预设范围</a-divider><!-- =============================================================== -->
	<p class="desc">可以预设常用的日期范围以提高用户体验。</p>
	<a-space direction="vertical" :size="12">
		<a-date-picker v-model:value="value5_1" :presets="presets5" @change="onChange5"></a-date-picker>
		<a-range-picker v-model:value="value5_2" :presets="rangePresets5" @change="onRangeChange5"></a-range-picker>
		<a-range-picker v-model:value="value5_3" :presets="rangePresets5" style="width: 400px" show-time format="YYYY/MM/DD HH:mm:ss"
			@change="onRangeChange5"></a-range-picker>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">三种大小</a-divider><!-- =============================================================== -->
	<p class="desc">三种大小的输入框，若不设置，则为 default。</p>
	<a-space direction="vertical" :size="12">
		<a-radio-group v-model:value="size6">
			<a-radio-button value="large">Large</a-radio-button>
			<a-radio-button value="default">Default</a-radio-button>
			<a-radio-button value="small">Small</a-radio-button>
		</a-radio-group>
		<a-date-picker :size="size6"></a-date-picker>
		<a-date-picker :size="size6" placeholder="Select Month" picker="month"></a-date-picker>
		<a-range-picker :size="size6"></a-range-picker>
		<a-date-picker :size="size6" placeholder="Select Week" picker="week"></a-date-picker>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">受控面板（有问题）</a-divider><!-- =============================================================== -->
	<p class="desc">通过组合 mode 与 onPanelChange 控制要展示的面板。</p>
	<a-space direction="vertical" :size="12">
		<a-date-picker v-model:value="value7_1" :mode="mode7_1" @panel-change="handlePanelChange7_1" @open-change="handleOpenChange7_1"
			 @change="onChange7" :show-time="showtime7_1"></a-date-picker>
		<a-range-picker v-model:value="value7_1" :mode="mode7_2" @panel-change="handlePanelChange7_2" @change="onRangeChange5" format="YYYY-MM" :value="value"
			:placeholder="['Start month', 'End month']"></a-range-picker>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">后缀图标</a-divider><!-- =============================================================== -->
	<p class="desc">通过 suffixIcon 自定义后缀图标</p>
	<a-space direction="vertical">
		<a-date-picker @change="onChange5">
			<template #suffixIcon>
				<smile-outlined class="aut-icon"></smile-outlined>
			</template>
		</a-date-picker>
		<a-date-picker placeholder="Select month" picker="month" @change="onChange5">
			<template #suffixIcon>
				<smile-outlined class="aut-icon"></smile-outlined>
			</template>
		</a-date-picker>
		<a-range-picker @change="onRangeChange5">
			<template #suffixIcon>
				<smile-outlined class="aut-icon"></smile-outlined>
			</template>
		</a-range-picker>
		<a-date-picker placeholder="Select week" picker="week" @change="onChange5">
			<template #suffixIcon>
				<smile-outlined class="aut-icon"></smile-outlined>
			</template>
		</a-date-picker>
		<a-date-picker suffixIcon="ab" @change="onChange5"></a-date-picker>
		<a-date-picker suffixIcon="ab" placeholder="Select month" picker="month" @change="onChange5"></a-date-picker>
		<a-range-picker suffixIcon="ab" @change="onRangeChange5"></a-range-picker>
		<a-date-picker suffixIcon="ab" placeholder="Select week" picker="week" @change="onChange5"></a-date-picker>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">弹出位置</a-divider><!-- =============================================================== -->
	<p class="desc">可以通过 placement 手动指定弹出的位置。</p>
	<div style="margin-left: 420px;">
		<a-radio-group v-model:value="placement9">
			<a-radio-button value="topLeft">topLeft</a-radio-button>
			<a-radio-button value="topRight">topRight</a-radio-button>
			<a-radio-button value="bottomLeft">bottomLeft</a-radio-button>
			<a-radio-button value="bottomRight">bottomRight</a-radio-button>
		</a-radio-group>
		<br />
		<br />
		<a-space direction="vertical" :size="12">
			<a-date-picker :placement="placement9"></a-date-picker>
			<a-range-picker :placement="placement9"></a-range-picker>
		</a-space>
	</div>
	
	<a-divider class="a-divi" orientation="left">范围选择器</a-divider><!-- =============================================================== -->
	<p class="desc">通过设置 picker 属性，指定范围选择器类型。date | week | month | quarter | year（默认date）</p>
	<a-space direction="vertical" :size="12">
		<a-range-picker v-model:value="value10_1"></a-range-picker>
		<a-range-picker v-model:value="value10_2" show-time></a-range-picker>
		<a-range-picker v-model:value="value10_3" picker="week"></a-range-picker>
		<a-range-picker v-model:value="value10_4" picker="month"></a-range-picker>
		<a-range-picker v-model:value="value10_5" picker="year"></a-range-picker>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">日期格式</a-divider><!-- =============================================================== -->
	<p class="desc">使用 format 属性，可以自定义日期显示格式。</p>
	<a-space direction="vertical" :size="12">
		<a-date-picker v-model:value="value11_1" :format="dateFormat"></a-date-picker>
		<a-date-picker v-model:value="value11_2" :format="dateFormatList"></a-date-picker>
		<a-date-picker v-model:value="value11_3" :format="monthFormat" picker="month"></a-date-picker>
		<a-range-picker v-model:value="value11_4" :format="dateFormat"></a-range-picker>
		<a-date-picker v-model:value="value11_5" :format="customFormat"></a-date-picker>
		<a-date-picker v-model:value="value11_6" :format="customWeekStartEndFormat" picker="week"></a-date-picker>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">禁用</a-divider><!-- =============================================================== -->
	<p class="desc">选择框的不可用状态。</p>
	<a-space direction="vertical">
		<a-date-picker v-model:value="value12_1"></a-date-picker>
		<a-date-picker v-model:value="value12_2" disabled picker="month"></a-date-picker>
		<a-range-picker v-model:value="value12_3" disabled></a-range-picker>
		<a-range-picker v-model:value="value12_4" :disabled="[false, true]"></a-range-picker>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">选择不超过七天的范围</a-divider><!-- =============================================================== -->
	<p class="desc">这里举例如何用 onCalendarChange 和 disabledDate 来限制动态的日期区间选择。</p>
	<a-range-picker v-model:value="value13_1" :disabled-date="disabledDate13" @change="onChange13" @open-change="onOpenChange13"
		@calendar-change="onCalendarChange13" style="margin-left: 20px;"></a-range-picker>
	
	<a-divider class="a-divi" orientation="left">额外的页脚</a-divider><!-- =============================================================== -->
	<p class="desc">在浮层中加入额外的页脚，以满足某些定制信息的需求。</p>
	<a-space direction="vertical">
		<a-date-picker>
			<template #renderExtraFooter>extra footer</template>
		</a-date-picker>
		<a-date-picker show-time>
			<template #renderExtraFooter>extra footer</template>
		</a-date-picker>
		<a-range-picker>
			<template #renderExtraFooter>extra footer</template>
		</a-range-picker>
		<a-range-picker show-time>
			<template #renderExtraFooter>extra footer</template>
		</a-range-picker>
		<a-date-picker placeholder="Select month" picker="month">
			<template #renderExtraFooter>extra footer</template>
		</a-date-picker>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">定制日期单元格</a-divider><!-- =============================================================== -->
	<p class="desc">使用 dateRender 可以自定义日期单元格的内容和样式。</p>
	<a-space direction="vertical" :size="12">
		<a-date-picker v-model:value="value15_1">
			<template #dateRender="{ current, today }">
				<div class="ant-picker-cell-inner" :style="getCurrentStyle(current, today)">
					{{ current.date() }}
				</div>
			</template>
		</a-date-picker>
		<a-range-picker v-model:value="value15_2">
			<template #dateRender="{ current, today, info }">
				<div class="ant-picker-cell-inner" :style="getCurrentStyle2(current, today, info)">
					{{ current.date() }}
				</div>
			</template>
		</a-range-picker>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">切换不同的选择器</a-divider><!-- =============================================================== -->
	<p class="desc">提供选择器，自由切换不同类型的日期选择器，常用于日期筛选场合。</p>
	<a-space direction="vertical" :size="12">
		<a-select v-model:value="type16">
			<a-select-option value="time">Time</a-select-option>
			<a-select-option value="date">Date</a-select-option>
			<a-select-option value="week">Week</a-select-option>
			<a-select-option value="month">Month</a-select-option>
			<a-select-option value="quarter">Quarter</a-select-option>
			<a-select-option value="year">Year</a-select-option>
		</a-select>
		<template v-if="type16 === 'time'">
			<a-time-picker v-model:value="value16_1" @change="onChange5"></a-time-picker>
		</template>
		<template v-else>
			<a-date-picker v-model:value="value16_1" :picker="type16" @change="onChange5"></a-date-picker>
		</template>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">自定义状态</a-divider><!-- =============================================================== -->
	<p class="desc">使用 status 为 DatePicker 添加状态，可选 error 或者 warning。</p>
	<a-space direction="vertical" style="width: 100%">
		<a-date-picker status="error"></a-date-picker>
		<a-date-picker status="warning"></a-date-picker>
		<a-range-picker status="error"></a-range-picker>
		<a-range-picker status="warning"></a-range-picker>
	</a-space>
	
</a-config-provider></div>
<div class="h100"></div>

</body>
<script>
const defaultFormat = 'YYYY-MM-DD HH:mm:ss';
const dateFormat = 'YYYY/MM/DD';
const weekFormat = 'MM/DD';
const monthFormat = 'YYYY/MM';
const dateFormatList = ['DD/MM/YYYY', 'DD/MM/YY'];
const Main = {
data() {
	return {
		dayjs,
		// locale: {},
		locale: localeValues,
		// value1_1: dayjs('2015-01-01', 'YYYY-MM-DD'),
		value1_1: '',
		value1_1_1: '',
		value1_2: dayjs('2024-10-7'),
		value1_3: '',
		value1_4: '',
		value1_5: '',
		
		value2_1: '',
		value2_2: '',
		value2_3: '',
		value2_4: '',
		value2_5: '',
		value2_6: [],
		value2_7: [],
		value2_8: [],
		value2_9: [],
		
		value3_1: '',
		value3_2: [],
		
		value4_1: '',
		value4_2: '',
		value4_3: [],
		value4_4: [],
		show_time4_1: {defaultValue: dayjs('00:00:00', 'HH:mm:ss')},
		show_time4_4: {hideDisabledOptions: true, defaultValue: [dayjs('00:00:00', 'HH:mm:ss'), dayjs('11:59:59', 'HH:mm:ss')],},
		
		value5_1: '',
		value5_2: [],
		value5_3: [],
		presets5: [
			{ label: '昨天', value: dayjs().add(-1, 'd') },
			{ label: '向前一周', value: dayjs().add(-7, 'd') },
			{ label: '向前一月', value: dayjs().add(-1, 'month') },
		],
		rangePresets5: [
			{ label: 'Last 7 Days', value: [dayjs().add(-7, 'd'), dayjs()] },
			{ label: 'Last 14 Days', value: [dayjs().add(-14, 'd'), dayjs()] },
			{ label: 'Last 30 Days', value: [dayjs().add(-30, 'd'), dayjs()] },
			{ label: 'Last 90 Days', value: [dayjs().add(-90, 'd'), dayjs()] },
		],
		
		size6: 'default',
		
		value7_1: '',
		value7_2: [],
		showtime7_1: false,
		mode7_1: 'date',
		mode7_2: ['month', 'month'],
		
		placement9: 'topLeft',
		
		value10_1: [],
		value10_2: [],
		value10_3: [],
		value10_4: [],
		value10_5: [],
		
		dateFormat,
		dateFormatList,
		monthFormat,
		value11_1: dayjs('2015/01/01', dateFormat),
		value11_2: dayjs('01/01/2015', dateFormatList[0]),
		value11_3: dayjs('2015/01', monthFormat),
		value11_4: [
			dayjs('2015/01/01', dateFormat),
			dayjs('2015/01/07', dateFormat),
		],
		value11_5: dayjs('2015/01/06', dateFormat),
		value11_6: dayjs(),
		
		value12_1: dayjs('2015-06-06', dateFormat),
		value12_2: dayjs('2015-06', 'YYYY-MM'),
		value12_3: [
			dayjs('2015-06-06', dateFormat),
			dayjs('2015-06-06', dateFormat),
		],
		value12_4: [
			dayjs('2019-09-03', dateFormat),
			dayjs('2019-11-22', dateFormat),
		],
		
		value13_1: [],
		
		value15_1: null,
		value15_2: [],
		
		type16: 'time',
		value16_1: null,
	}
},
methods:{
	onChange(value, dateString){
		console.log('所选时间：', value);
		console.log('已格式化的选定时间：', dateString);
	},
	onOk(value){
		console.log('onOk: ', value);
	},
	onRangeOk(value){
		console.log('onRangeOk: ', value);
	},
	
	myRange(start, end){
		const result = [];
		for (let i = start; i < end; i++) {
			result.push(i);
		}
		return result;
	},
	disabledDate4(current){
		// 无法选择今天之前和今天
		// console.log(current.format('YYYY-MM-DD HH:mm:ss'))
		return current && current < dayjs().endOf('day');
	},
	disabledDateTime4(){
		return {
			disabledHours: () => this.myRange(0, 24).splice(4, 20),
			disabledMinutes: () => this.myRange(30, 60),
			disabledSeconds: () => [0, 5, 6],
		};
	},
	disabledRangeTime4(date, type){
		if (type === 'start') {
			return {
				disabledHours: () => this.myRange(0, 60).splice(4, 20),
				disabledMinutes: () => this.myRange(30, 60),
				disabledSeconds: () => [2, 3, 4],
			};
		}
		return {
			disabledHours: () => this.myRange(0, 60).splice(20, 4),
			disabledMinutes: () => this.myRange(0, 31),
			disabledSeconds: () => [2, 3, 4],
		};
	},
	
	onChange5(date, dateString){
		if (date) {
			// console.log('Date: ', date);
			console.log('已格式化的选定时间：', dateString);
		} else {
			console.log('Clear');
		}
	},
	onRangeChange5(dates, dateStrings){
		if (dates) {
			console.log('From: ', dates[0], ', to: ', dates[1]);
			console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
		} else {
			console.log('Clear');
		}
	},
	
	onChange7(date, dateString){
		// console.log('Date: ', date);
		if (date) {
			console.log('已格式化的选定时间：', dateString);
			this.mode7_1 = 'time';
			this.showtime7_1 = true;
		} else {
			console.log('Clear');
		}
	},
	handleOpenChange7_1(open){
		// console.log(open);
	},
	handlePanelChange7_1(_val, mode){
		console.log(_val);
		console.log(mode);
	},
	handlePanelChange7_2(_val, mode){
		console.log(_val);
		console.log(mode);
	},
	
	customFormat(value){
		return `自定义格式: ${value.format(dateFormat)}`;
	},
	customWeekStartEndFormat(value){
		return `${dayjs(value).startOf('week').format(weekFormat)} ~ ${dayjs(value).endOf('week').format(weekFormat)}`;
	},
	
	disabledDate13(current){
		// console.log(current.format('YYYY_MM_DD HH:mm:ss'));
		// console.log('disabledDate13');
		if(!this.value13_1 || this.value13_1.length === 0){
			return false;
		}
		let tooLate = this.value13_1[0] && current.diff(this.value13_1[0], 'days') > 7;
		let tooEarly = this.value13_1[1] && this.value13_1[1].diff(current, 'days') > 7;
		return tooEarly || tooLate;
	},
	onChange13(val){
		// console.log(val);
		console.log('onChange13');
	},
	onOpenChange13(open){
		// console.log(open);
		console.log('onOpenChange13');
	},
	onCalendarChange13(dates, dateStrings, info){
		// console.log(dates);				//[M, undefined]
		// console.log(dateStrings);		//['2024-10-11', '']
		// console.log(info);				//{range: 'start'}
		// console.log('onCalendarChange13');
		this.value13_1 = dates;
	},
	
	getCurrentStyle(current, today){
		let style = {};
		if(current.date() == 1){
			// style.border = '1px solid #1890ff';
			// style.borderRadius = '50%';
			style = {border: '1px solid #1890ff', borderRadius: '50%'};
		}
		return style;
	},
	getCurrentStyle2(current, today, info){
		// console.log(today.format('YYYY_MM_DD'));
		// console.log(info);
		let style = {};
		let border = "1px solid #90ff90";
		if(info.range == 'end'){
			border = "1px solid #ff9090";
		}
		if(current.date() == 1){
			style = {border, borderRadius: '50%'};
		}
		return style;
	},
	
},
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(AntdIconsVue)) {app.component(key, component)};
app.use(antd);
let vm = app.mount("#app");

</script>
</html>
